{% extends 'base.html' %}
{% load static %}
{% block title %}用户管理 - 用户列表{% endblock %}
{% block content %}
        <!-- 内容标题栏 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12">
            <h1 class="m-0 text-dark">用户管理</h1>
          </div><!-- /.col -->
          <div class="col-sm-12">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">用户管理</li>
                <li class="breadcrumb-item active"><a href="{% url 'login:user_pwd_modify' %}">用户列表</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /内容标题栏 -->
<section class="content" style="box-sizing: border-box !important;">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card card-gray">
                <div class="card-body table-responsive p-1">
                    <table id="userlist" class="table table-striped table-bordered text-nowrap">
                        <thead>
                        <tr style="vertical-align: middle;text-align: center">
                            <th>序号</th>
                            <th>用户名</th>
                            <th>手机号码</th>
                            <th>邮箱</th>
                            <th>部门</th>
                            <th>用户角色</th>
                            <th>账号状态</th>
                            <th>职位</th>
                            <th>直接上级</th>
                            <th>超级管理员</th>
                            <th>创建时间</th>
                            <th>最后登录时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for info in users %}
                            <tr style="vertical-align: middle;text-align: center">
                                <td style="vertical-align: middle;">{{ forloop.counter }}</td>
                                <td style="vertical-align: middle;"><a href="{% url 'login:user_modify' %}?uid={{ info.id }}">{{ info.username }}</a></td>
                                <td style="vertical-align: middle;">{{ info.mobile }}</td>
                                <td style="vertical-align: middle;">{{ info.email }}</td>
                                <td style="vertical-align: middle;">{{ info.department }}</td>
                                <td style="vertical-align: middle;">{{ info.role }}</td>
                                {% ifequal info.is_active 1 %}
                                    <td style="vertical-align: middle;"><label style="color: white;background-color: green;border-radius: 5px;padding: 4px;">&nbsp;有效&nbsp;</label></td>
                                {% else %}
                                    <td style="vertical-align: middle;"><label style="color: white;background-color: red;border-radius: 5px;padding: 2px;">&nbsp;禁用&nbsp;</label></td>
                                {% endifequal %}
                                <td style="vertical-align: middle;"><label style="color: white;background-color: #0077f2;border-radius: 5px;padding: 4px;">&nbsp;&nbsp;{{ info.position }}&nbsp;&nbsp;</label></td>
                                <td style="vertical-align: middle;">{{ info.direct_leader }}</td>
                                {% ifequal info.is_superuser 1 %}
                                    <td style="vertical-align: middle !important;font-size: 18px;color: #00c054"><i class="fa fa-check" ></i></td>
                                {% else %}
                                    <td style="vertical-align: middle !important;font-size: 18px;color: red"><i class="fa fa-times" ></i></td>
                                {% endifequal %}
                                <td style="vertical-align: middle;">{{ info.date_joined }}</td>
                                {% if info.last_login %}
                                <td style="vertical-align: middle;">{{ info.last_login }}</td>
                                {% else %}
                                    <td style="vertical-align: middle;">此用户没有登录记录</td>
                                {% endif %}
                                <td style="vertical-align: middle;">
                                    <a href="{% url 'login:user_modify' %}?uid={{ info.id }}" title="编辑" style="color: #007bff;"><i class="fas fa-edit"> 编辑</i> </a>
                                     丨
                                    <a href="{% url 'login:permission' 'user' info.id %}" style="color: #00b44e;"><i class="fas fa-wrench"> 权限设置</i></a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

</section>
{% block custom_js %}
    <!--dataTables-->
   <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script>
  $(function () {
    $("#userlist").DataTable({
      "responsive": false,   //适配手机端表格滚动，需设置为false
      "autoWidth": false,    //固定宽度
      "paging": true,        //允许分页
      "searching": true,     //允许内容搜索
      "lengthChange": true,  //允许改变每页显示的行数
      "ordering": true,      //允许排序
      "info": true,          //显示信息
        "oLanguage":{        //语言转换
            "sProcessing": "处理中...",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sZeroRecords": "没有找到匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共_TOTAL_ 项",
            "sLengthMenu": "每页显示: _MENU_ 行",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sSearch": "搜索:",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "尾页",
                },
            "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
      }
    });
  });
</script>
{% endblock %}
{% endblock %}